<head>
	<!--<meta charset="utf-8" />
	<link rel="stylesheet" href="/BackEndRecursosHumanos/app/webroot/css/smoothness/jquery-ui-1.10.3.custom.min.css" />
	<script src="/BackEndRecursosHumanos/app/webroot/js/jquery.mousewheel.js"></script>
  	<script src="/BackEndRecursosHumanos/app/webroot/js/globalize.js"></script>
  	<script type="text/javascript" src="/BackEndRecursosHumanos/app/webroot/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="/BackEndRecursosHumanos/app/webroot/js/jquery-ui-1.10.3.custom.min.js"></script>-->
	<!--<link rel="stylesheet" type="text/css" href="/BackEndRecursosHumanos/app/webroot/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">-->
	
	
	
	<!--<script type="text/javascript" src="/BackEndRecursosHumanos/app/webroot/js/jquery-ui-i18n.js"></script>-->
  	<!--<link rel="stylesheet" href="/BackEndRecursosHumanos/app/webroot/css/stylespinner.css" />-->
	
	<style>
	  .selectable_evento .ui-selecting { background: #8C8E92; }
	  .selectable_evento .ui-selected { background: #36393C; color: white; }
	  .selectable_evento { list-style-type: none; margin: 0; width: 60%; }
	  
  	</style>
	
	<script>
		
		function click_evento($id) 
		{
	   		$('#AssignIdEvento').val($id);
	   		alert($id);
		}
		function click_sede($id) 
		{
	   	
		}
		
	</script>
	<script>
	$.widget( "ui.timespinner", $.ui.spinner, 
 	{
	    options: 
	    {
	      // seconds
	      step: 60 * 1000,
	      // hours
	      page: 60
	    },
	 
	    _parse: function( value ) 
	    {
	      if ( typeof value === "string" ) 
	      {
	        // already a timestamp
	        if ( Number( value ) == value ) 
	        {
	          return Number( value );
	        }
	        return +Globalize.parseDate( value );
	      }
	      return value;
	    },
	 
	    _format: function( value ) 
	    {
	      return Globalize.format( new Date(value), "t" );
	    }
	  });
	
	
	
	$(document).ready( function() 
	{
	      $('.selectable_evento').click(function()
	      {
	      	alert('hola');
	      });
	});
	$(function() 
	{
    	$( "#AssignHoraInicHour" ).timespinner();
 		$( "#AssignHoraFinHour" ).timespinner();
    	$( "#accordion" ).accordion(
    		{
    			 heightStyle: "content",
    			 collapsible: true
    		}
    	);   	
    	$( ".date-picker" ).datepicker(
		{
    		dateFormat: 'mm/dd/yy',
    		changeMonth: true,
			changeYear: true,
			minDate: 0
    	});
    	$( ".selectable_evento" ).selectable(
			{
				
				selected: function(event, ui) { 
        			$(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");           
    			}, 
				stop: function(event, ui) 
				{
				    var el_id = $(this).children("ol").attr("id");
		    
				    $('.selectable_evento .ui-widget-content.ui-selected').each(function(index) 
				    {
     					$	
     					$('#AssignIdEvento').val($(this).attr('id'));
     					
					});
				    
				    $(".selectable_evento ui-widget-content.ui-selected").not("#" + el_id).each(function(index, element) 
				    { 
				       	alert(index);
				       	$(element).toggleClass("ui-selected");
				        if($(element).children("li").hasClass("ui-selected"))
				        {
				           $(element).children("li").removeClass("ui-selected");
				           $('#AssignIdEvento').val($(element).children("li").attr("id"));
				           
				        }
				    });
				}
			});
	
    	
    	
  	});
	 
	</script>
	
	
</head>
<body>
	
	<center>
		<?php echo $this->Form->create('Assign');?>
		<fieldset>
			<legend>Asignacion de Evento a una Sede</legend>
			<center>
				<table>
					
					<tr>
						<td>
							<center>
								<fieldset>
									<legend><b>Seleccione un Evento</b></legend>
									<center>
										<div>														
											<input type="hidden" name="data[Assign][id_evento]" value="" id="AssignIdEvento" >
											<div id="accordion">
											  <?php 
											  	foreach ($Todos_Tipo_Eventos as $Tipo_Evento) 
											  	{
													  
												
											  ?>
											  <h3><?php echo $Tipo_Evento['TipoEvento']['nombre_tipo_evento']?></h3>
											  <div>
											    <p>
												    <table>
														<tr>
															<td style="text-align: center; vertical-align: middle;">
																<div>
																<ol id="selectable"  style="text-align: center; width: 100%;" class="selectable_evento">
																<?php  
																	foreach ($Todos_Eventos as $Evento) 
																	{
																		if ($Evento['Evento']['tipo_evento_id'] == $Tipo_Evento['TipoEvento']['id'])
																		{
																?>
																		
																  		<li id="<?php echo $Evento['Evento']['id']?>" class="ui-widget-content" ><?php echo $Evento['Evento']['nombre_evento']?></li>
																 
																<?php 
																		}
																	}
																?>
																</ol>
																</div>
															</td>
														</tr>
													</table>
											    </p>
											  </div>
											
												<?php 
												}
												?>
											</div>
											<br />
										</div>
									</center>
								</fieldset>
							</center>
						</td>
						
						<td>
							<center>
								<fieldset>
									<legend><b>Informacion Especifica del Evento</b></legend>
									<center>
											
										<?php echo $this->Form->create('Assign');?>
										<table>
											<tr>
												<td>
													
														<center>
														<?php
							
															echo $this->Form->input('sede_id',array(
																															
																										'options' => array($sedes),
																										'label' => array(
																															'text' => 'Sede'
																																			
																														)
																										 
																						               )
																				 );
														?>
														</center>
												
												</td>
											</tr>
											<tr>
												<td>
													<center>
														<table>
															
															<tr>
																<td style="vertical-align: middle; text-align: center">
																	<center>
																		<?php echo $this->Form->input('fecha_inic_evento', array(
																																	'label' => 'Fecha de inicio',
																																	'class' => 'date-picker',
																																	'style' => array(
																																						'width: 75%; text-align: center;'
																																					)
																																 )
																									 ); 
																	    ?>
																    </center>
																</td>
																
																
																<td style="vertical-align: middle; text-align: center">
																	<center>
																		<?php echo $this->Form->input('fecha_fin_evento', array(
																																'label' => 'Fecha Fin',
																																'class' => 'date-picker',
																																'style' => array(
																																						'width: 75%; 
																																						text-align: center;
																																						vertical-align: middle;'
																																					)
																														 	   )
																									 ); 
																	    ?>
																    </center>
																</td>
																
															</tr>
														</table>
													</center>
												</td>
												
											</tr>
											<tr>
												<td>
													
													<table>
														<tr> 
															<td style="text-align: center">
																<center>
																	<label> Hora de Inicio</label>
																	<input id="AssignHoraInicHour" style="text-align: center" value="12:00 PM" name="data[Assign][hora_inic][hour]" class="spinner-hora" />
																</center>
															</td>
															<td style="text-align: center">
																<center>
																	<label> Hora Fin</label>
																	<input id="AssignHoraFinHour" style="text-align: center" value="12:00 PM" name="data[Assign][hora_fin][hour]" class="spinner-hora"/>
																</center>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</table>
										
										
										<?php 
												
																	   
												echo $this->Form->end('Guardar Evento');?>
									</center>
								</fieldset>
							</center>
						</td>
						
					</tr>
					<tr>
						
					</tr>
				</table>
			</center>
		</fieldset>
		
	</center>
</body>